import Util from '../../../../utils'
import Menus from './Menus';
import './index.less';
import { WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;
export default class ContextMenu extends React.Component {
    doHide = true;
    constructor(props) {
        super(props);
        this.state = {
            workArea: 'nono',
            id: Util.UUID(8),
            visible: false,
            menus: [{
                key: 'excelInsertAbove',
                title: getLabel(502985, '插入行'),
                icon: 'icon-edc-common-insertrowabove',
                number: 1,
                showNumber: true,
                workArea: 'viewportcolHeader',
            }, {
                key: 'excelInsertLeft',
                title: getLabel('502986', '插入列'),
                icon: 'icon-edc-common-insertrowleft',
                number: 1,
                showNumber: true,
                workArea: 'viewportrowHeader',
            }, {
                key: 'excelDeleteRow',
                title: getLabel('506303','删除行'),
                icon: 'icon-edc-common-deleterow',
                workArea: 'viewportcolHeader',
            }, {
                key: 'excelDeleteColumn',
                title: getLabel('511754','删除列'),
                icon: 'icon-edc-common-deletecolumn',
                workArea: 'viewportrowHeader',
            }, {
                key: 'excelRowSize',
                title: getLabel('514593','设置行高'),
                icon: 'icon-edc-common-colum-height',
                showNumber: true,
                workArea: 'viewportcolHeaderrowHeader',
            }, {
                key: 'excelColumnSize',
                title: getLabel('514594','设置列宽'),
                icon: 'icon-edc-common-column-width',
                showNumber: true,
                workArea: 'viewportcolHeaderrowHeader',
            },{
                command: "gc.spread.contextMenu.deleteSheet",
                key: 'exceldeleteSheet',
                name: "gc.spread.deleteSheet",
                icon: 'icon-coms-shanchu',
                title: getLabel('522793','删除表单'),
                showNumber: false,
                workArea: "sheetTab",
            },{
                command: "gc.spread.contextMenu.hideRows",
                key: 'excelHideRows',
                name: "gc.spread.hideRows",
                icon: 'icon-coms-hide edc_menuIcon',
                title: getLabel('522792','隐藏行'),
                showNumber: false,
                workArea: "colHeader",
            },{
                command: "gc.spread.contextMenu.unhideRows",
                key: 'excelUnhideRows',
                name: "gc.spread.unhideRows",
                icon: 'icon-coms-display edc_menuIcon',
                title: getLabel('522791','显示行'),
                showNumber: false,
                workArea: "colHeader",
            },{
                command: "gc.spread.contextMenu.hideCols",
                key: 'excelHideCols',
                name: "gc.spread.hideCols",
                icon: 'icon-coms-hide  edc_menuIcon',
                title: getLabel('522790','隐藏列'),
                showNumber: false,
                workArea: "rowHeader",
            },{
                command: "gc.spread.contextMenu.unhideColumns",
                key: 'excelUnhideCols',
                name: "gc.spread.unhideColumns",
                icon: 'icon-coms-display edc_menuIcon',
                title: getLabel('522789','显示列'),
                showNumber: false,
                workArea: "rowHeader",
            }
        ]
        }
    }
    excute = (cmd, params = {}) => {
        const sheet = this.getWorkbook().getActiveSheet();
        const sheetName = sheet.name();
        const row = sheet.getActiveRowIndex();
        const col = sheet.getActiveColumnIndex();
        this.command().execute({
            cmd,
            sheet,
            row,
            col,
            sheetName,
            ...params
        });

    }
    excelHideRows = () => {
        const sheet = this.getWorkbook().getActiveSheet();
        const selections = sheet.getSelections();
        this.excute('excel.hide.row', {selections});
    }
    excelUnhideRows = () => {
        const sheet = this.getWorkbook().getActiveSheet();
        const selections = sheet.getSelections();
        this.excute('excel.unhide.row', {selections});
    }
    excelHideCols = () => {
        const sheet = this.getWorkbook().getActiveSheet();
        const selections = sheet.getSelections();
        this.excute('excel.hide.col', {selections});
    }
    excelUnhideCols = () => {
        const sheet = this.getWorkbook().getActiveSheet();
        const selections = sheet.getSelections();
        this.excute('excel.unhide.col', {selections});
    }
    exceldeleteSheet = () => {
        this.excute('gc.spread.contextMenu.deleteSheet', {});
    }
    excelColumnSize = () => {
        const { menus } = this.state;
        const sheet = this.getWorkbook().getActiveSheet();
        const selections = sheet.getSelections();
        const menu = menus.find(d => d.key === 'excelColumnSize');
        this.excute('excel.column.size', { size: menu.number, selections });
    }
    excelRowSize = () => {
        const { menus } = this.state;
        const sheet = this.getWorkbook().getActiveSheet();
        const selections = sheet.getSelections();
        const menu = menus.find(d => d.key === 'excelRowSize');
        this.excute('excel.row.size', { size: menu.number, selections });
    }
    excelDeleteColumn = () => {
        const sheet = this.getWorkbook().getActiveSheet();
        const selections = sheet.getSelections();
        this.excute('excel.delete.column', { selections });
    }
    excelDeleteRow = () => {
        const sheet = this.getWorkbook().getActiveSheet();
        const selections = sheet.getSelections();
        this.excute('excel.delete.row', { selections });
    }
    excelInsertLeft = (key) => {
        const { menus } = this.state;
        const menu = menus.find(d => d.key === key);
        if (menu) {
            this.excute('excel.insert.column', { colCount: menu.number });
        }
    }
    excelInsertAbove = (key) => {
        const { menus } = this.state;
        const menu = menus.find(d => d.key === key);
        if (menu) {
            this.excute('excel.insert.row', { rowCount: menu.number })
        }
    }
    command = () => {
        return this.getWorkbook().commandManager();
    }
    getWorkbook = () => {
        if (!this.workbook) {
            this.workbook = window.GC.Spread.Sheets.findControl(document.getElementById(this.state.id));
        }
        return this.workbook;
    }
    componentDidMount() {
        this.div = document.createElement('div');
        document.body.appendChild(this.div);
        this.renderMenus();
        document.addEventListener('click', this.hideMenus)
    }
    componentWillUnmount() {
        ReactDOM.unmountComponentAtNode(this.div);
    }
    hideMenus = () => {
        if (this.doHide) {
            this.setState({
                visible: false
            }, this.renderMenus)
        }
    }
    onClickNumber = () => {
        this.doHide = false;
        setTimeout(() => {
            this.doHide = true;
        }, 20);
    }
    clickMenu = (key) => {
        if (this.doHide) {
            let funcKey = key;
            if (typeof key !== 'string') {
                funcKey = key[1];
            }
            if (this[funcKey]) {
                this[funcKey](key);
            } else {
                this.excute(key);
            }
        }
    }
    onChangeNumber = (key, number) => {
        if (typeof key === 'string') {
            this.setState({
                menus: this.state.menus.map(d => {
                    if (d.key === key) {
                        return {
                            ...d,
                            number
                        }
                    } else {
                        return d;
                    }
                })
            }, this.renderMenus);
        } else {
            this.setState({
                menus: this.state.menus.map(d => {
                    if (d.key === key[0]) {
                        return {
                            ...d,
                            children: d.children.map(f => {
                                if (f.key === key[1]) {
                                    return {
                                        ...f,
                                        number
                                    }
                                } else {
                                    return f;
                                }
                            })
                        }
                    } else {
                        return d;
                    }
                })
            }, this.renderMenus)
        }

    }
    onContextMenu = (e) => {
        const wrap = jQuery("#" + this.state.id);
        const { left, top } = wrap.offset();
        const height = wrap.height();
        const width = wrap.width();
        const right = left + width;
        const bottom = top + height;
        const hitInfo = this.getWorkbook().hitTest(e.clientX - left, e.clientY - top);

        const { worksheetHitInfo,tabStripHitInfo } = hitInfo;
        let workArea = 'nono';
        if (worksheetHitInfo) { // 点击表格区域
            const { colViewportIndex, rowViewportIndex } = worksheetHitInfo;
            workArea = 'viewport';
            if(rowViewportIndex===-1 && colViewportIndex === 1){
                workArea = 'rowHeader';
            }
            if(rowViewportIndex===1 && colViewportIndex === -1){
                workArea = 'colHeader';
            }
            // if (colViewportIndex === 1 || rowViewportIndex === 1) {
            //     workArea = 'viewport';
            // }
        } else if(tabStripHitInfo && tabStripHitInfo.sheetTab) { // sheetTab区域
            workArea = 'sheetTab';
        }
        const menuHeight = this.state.menus.length * 30 + 20;
        this.setState({
            left: e.clientX + 400 > right ? right - 400 : e.clientX,
            top: workArea == 'sheetTab' ? e.clientY -60 : e.clientY + menuHeight > bottom ? bottom - menuHeight : e.clientY,
            visible: workArea !== 'nono',
            workArea,
            menus: this.state.menus.map(d => {
                if (d.key === 'excelRowSize') {
                    const sheet = this.getWorkbook().getActiveSheet();
                    const number = sheet.getRowHeight(sheet.getActiveRowIndex());
                    return {
                        ...d, number
                    }
                } else if (d.key === 'excelColumnSize') {
                    const sheet = this.getWorkbook().getActiveSheet();
                    const number = sheet.getColumnWidth(sheet.getActiveColumnIndex());
                    return {
                        ...d, number
                    }
                } else {
                    return d;
                }
            })
        }, this.renderMenus)
        e.stopPropagation && e.stopPropagation();
        e.preventDefault && e.preventDefault();
        e.nativeEvent && e.nativeEvent.preventDefault();
    }
    renderMenus = () => {
        ReactDOM.render(<Menus ecId={`${this && this.props && this.props.ecId || ''}_Menus@u4rsg8`} {...this.state} onClick={this.clickMenu} onClickNumber={this.onClickNumber} onChangeNumber={this.onChangeNumber}></Menus>, this.div);
    }
    render() {
        const { id } = this.state;
        return React.Children.map(this.props.children, (child) => {
            return React.cloneElement(child, { id, onContextMenu: this.onContextMenu });
        });
    }
}